import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";
import type { Directive, DirectiveBinding } from "vue";

//设置表格高度
const doResize = async (el, binding) => {
  const { value } = binding;
  const bottomOffset = (value && value.bottomOffset) || 30;
  const height =
    window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
  el.style.height = `${height}px`;
};
export const adaptive: Directive = {
  //初始化设置
  updated(el, binding) {
    //设置resize监听方法
    el.resizeListener = async () => {
      await doResize(el, binding);
    };
    //绑定监听方法到addResizeListener
    addResizeListener(window.document.body, el.resizeListener);
    addResizeListener(el, el.resizeListener);
  },
  //绑定默认高度
  async mounted(el: HTMLElement, binding: DirectiveBinding) {
    await doResize(el, binding);
  },
  //销毁时设置
  beforeUnmount(el) {
    //移除resize监听
    removeResizeListener(el, el.resizeListener);
  }
};
